import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import React, { Component } from 'react';
import classNames from 'classnames';
import { Tag, Icon } from 'antd';
import intl from "../../utils/intl";
import styles from "./index.less?modules";
var CheckableTag = Tag.CheckableTag;

var TagSelectOption = function TagSelectOption(_ref) {
  var children = _ref.children,
      checked = _ref.checked,
      _onChange = _ref.onChange,
      value = _ref.value;
  return /*#__PURE__*/React.createElement(CheckableTag, {
    checked: checked,
    key: value,
    onChange: function onChange(state) {
      return _onChange(value, state);
    }
  }, children);
};

TagSelectOption.isTagSelectOption = true;

var TagSelect = /*#__PURE__*/function (_Component) {
  _inherits(TagSelect, _Component);

  var _super = _createSuper(TagSelect);

  function TagSelect(props) {
    var _this;

    _classCallCheck(this, TagSelect);

    _this = _super.call(this, props);

    _this.onChange = function (value) {
      var onChange = _this.props.onChange;

      if (!('value' in _this.props)) {
        _this.setState({
          value: value
        });
      }

      if (onChange) {
        onChange(value);
      }
    };

    _this.onSelectAll = function (checked) {
      var checkedTags = [];

      if (checked) {
        checkedTags = _this.getAllTags();
      }

      _this.onChange(checkedTags);
    };

    _this.handleTagChange = function (value, checked) {
      var v = _this.state.value;

      var checkedTags = _toConsumableArray(v);

      var index = checkedTags.indexOf(value);

      if (checked && index === -1) {
        checkedTags.push(value);
      } else if (!checked && index > -1) {
        checkedTags.splice(index, 1);
      }

      _this.onChange(checkedTags);
    };

    _this.handleExpand = function () {
      var expand = _this.state.expand;

      _this.setState({
        expand: !expand
      });
    };

    _this.isTagSelectOption = function (node) {
      return node && node.type && (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
    };

    _this.state = {
      expand: false,
      value: props.value || props.defaultValue || []
    };
    return _this;
  } // eslint-disable-next-line


  _createClass(TagSelect, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if ('value' in nextProps && nextProps.value) {
        this.setState({
          value: nextProps.value
        });
      }
    }
  }, {
    key: "getAllTags",
    value: function getAllTags() {
      var _this2 = this;

      var children = this.props.children;
      children = React.Children.toArray(children);
      var checkedTags = children.filter(function (child) {
        return _this2.isTagSelectOption(child);
      }).map(function (child) {
        return child.props.value;
      });
      return checkedTags || [];
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this3 = this;

      var _this$state = this.state,
          value = _this$state.value,
          expand = _this$state.expand;
      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          style = _this$props.style,
          expandable = _this$props.expandable;
      var allTagsLength = this.getAllTags().length;
      var checkedAll = allTagsLength !== 0 && allTagsLength === value.length;
      var cls = classNames(styles.tagSelect, className, (_classNames = {}, _defineProperty(_classNames, styles.hasExpandTag, expandable), _defineProperty(_classNames, styles.expanded, expand), _classNames));
      return /*#__PURE__*/React.createElement("div", {
        className: cls,
        style: style
      }, /*#__PURE__*/React.createElement(CheckableTag, {
        checked: checkedAll,
        key: "tag-select-__all__",
        onChange: this.onSelectAll
      }, intl.get('cpaas.common.scope.all').d('全部')), value && React.Children.map(children, function (child) {
        if (_this3.isTagSelectOption(child)) {
          return React.cloneElement(child, {
            key: "tag-select-".concat(child.props.value),
            value: child.props.value,
            checked: value.indexOf(child.props.value) > -1,
            onChange: _this3.handleTagChange
          });
        }

        return child;
      }), expandable && /*#__PURE__*/React.createElement("a", {
        className: styles.trigger,
        onClick: this.handleExpand
      }, expand ? intl.get('cpaas.common.button.up').d('收起') : /*#__PURE__*/React.createElement(Icon, {
        type: expand ? 'up' : 'down'
      })));
    }
  }]);

  return TagSelect;
}(Component);

TagSelect.Option = TagSelectOption;
export default TagSelect;